<template>
	<view>
		<view class="container">
			<view class="top">
				<!-- <view class="nav">
					<image @click="goBack()" src="@/static/tell_left.png" mode=""></image>
					<view class="title">图集</view>
					<view class="nav_right" >
						<image style="width: 30rpx;height: 6rpx;" src="@/static/detail_more.png" mode=""></image>
					</view>
				</view> -->
						<view style="position: absolute;z-index: 999;bottom: 0;right: -4px;">
							<goods-action-icon style="" icon="collect" @click="favorite" 
								:active="collect"></goods-action-icon>
						</view>
				<u-swiper :current="current" radius="0" indicatorMode="dot" indicatorActiveColor="#84E7E4"
					:indicator="true" height="251" :list="images"></u-swiper>
			</view>
			<view class="box">
				<view class="box1">
					<view class="top">
						<image class="top_bg" :src="detail_bg_img" mode=""></image>
						<view class="top_box">
							<view class="box_text box_text1">折后￥{{ productsdata.zhekou_price}}/天</view>
							<view class="box_text box_text2">
								当前￥ <text>{{products.sell_price}}</text>/天
							</view>
							<view class="box_text box_text3">{{productsdata.zhekou_tag}}</view>
							<view class="box_text box_text4">{{productsdata.zhekou_tip}}</view>
						</view>
						<view class="middle_box">
							<view class="box_jg">
								<view class="jg_l" style="width:100%;">
									<view class="l_item" style="width:25%;">
										<view class="item_d">1天</view>
										<view class="item_m">{{products.sell_price}}/天</view>
									</view>
									<view class="l_item" style="width:25%;">
										<view class="item_d">2天</view>
										<view class="item_m">{{products.sell_price_2}}/天</view>
									</view>
									<view class="l_item" style="width:25%;">
										<view class="item_d">3天</view>
										<view class="item_m">{{products.sell_price_3}}/天</view>
									</view>
									<view class="l_item" style="width:25%;">
										<view class="item_d">之后续租</view>
										<view class="item_m">{{products.sell_price_xc}}/天</view>
									</view>
								</view>
								<!-- <view class="jg_r">
									<view class="r_text">价格<br>详情</view>
									<image src="@/static/right.png" mode=""></image>
								</view> -->
							</view>
							<view class="box_title">
								<image :src="detail_zy_img" mode=""></image>
								<view class="zy_title">{{ products.title }}</view>
							</view>
						</view>
						<view class="box_foot">
							<view class="foot_item">
								<text>已租{{ products.sale }}</text>
							</view>
							<!-- <view class="foot_item">
								<image src="@/static/detail_sms.png" mode=""></image>
								<text>教学/说明书</text>
							</view> --> 
							<view class="foot_item" @click="fobottm">
								<text>租赁说明</text>
							</view>
							<view class="foot_item" @click="$utils.navigateTo('goods/date',{ id: products.id})">
								<image src="@/static/detail_dq.png" mode=""></image>
								<text>档期</text>
							</view>
						</view>
					</view>
				</view>

				<view class="box2">
					<!-- 		<view class="tit_item">
						<view class="item_l">
							<view class="l_t">活动</view>
							<view class="l_cont">
								<image class="c_bg" src="@/static/detail_zj.png" mode=""></image>
								<view class="c_box">直减50</view>
							</view>
						</view>
					</view> -->
					<view class="tit_item">
						<view class="item_l">
							<view class="l_t">取货</view>
							<view class="l_r">
								<text  v-if="zuqi.pickupType == 1">自提</text>
								<text v-if="zuqi.pickupType == 2">闪送</text>
								<text v-if="zuqi.pickupType == 3">顺丰快递</text>
								<text v-else>取货方式</text>
							</view>
							 
						</view>
					</view>
					<view class="tit_item" @click="$utils.navigateTo('goods/startEndDate',{ id: products.id})">
						<view class="item_l">
							<view class="l_t">租期</view>

							<view class="l_r" v-if="!zuqi">
								<text>请选择租期</text>
								<image src="@/static/right.png" mode=""></image>
							</view>
							<view class="l_r" v-if="zuqi">
								<text>{{formatDate(zuqi.start.fullDateTime)}} -
									{{formatDate(zuqi.end.fullDateTime)}}</text>
								<image src="@/static/right.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="tit_item" @click="onClicked">
						<view class="item_l" style="align-items: flex-start;">
							<view class="l_t">套餐</view>
							<view class="l_r2">
								<text
									v-if="selectedGoodsInfo.selectedSku">已选择【{{selectedGoodsInfo.selectedSku.specSelected?selectedGoodsInfo.selectedSku.specSelected:'基础配置'}}】</text>
								<view class="r2_d">
									<image :src="tg_icon_7_img" mode=""></image>
									<view class="d_tc">共{{Object.entries(item).length}}种套餐可选</view>
								</view>
							</view>
						</view>
					</view>
					<view class="tit_item">
						<view class="item_l" style="align-items: flex-start;">
							<view class="l_t">押金</view>
							<view class="l_r3">
								该套餐押金￥{{products.yajin_price}}； <br>您的免押金额度￥0
								<text>提升额度>></text>
							</view>
						</view>
					</view>
					<view class="tit_item">
						<view class="item_l">
							<view class="l_t">数量</view>
						</view>
						<u-number-box v-model="value" @change="valChange"></u-number-box>
					</view>
					<!-- 				<view class="tit_item">
						<view class="item_l">
							<view class="l_t">安心服务</view>
							<view class="l_r4">
								<text>￥50.00</text>
								<view class="r4_i">
									<image src="@/static/detail_i.png" mode=""></image>
									<text>租机必备，安心体验></text>
								</view>
							</view>
						</view>
						<image class="img_yes" src="@/static/detail_yes.png" mode=""></image>
					</view> -->
				</view>

				<view class="boxs_3">
					<view class="boxs3_title">
						<view class="boxs3_left">
							<image src="@/static/index_title_icon.png" mode=""></image>
							<view class="left_item">推荐商品</view>
						</view>
						<view class="boxs3_right" @click="$utils.navigateTo('goods/list',{ id: products.cat_id })" >更多</view>
					</view>
					<view class="boxs3_box">
						<view @click="$utils.navigateTo('goods/view',{ id: i.id })" class="boxs3_item" v-for="i in goods_tj">
							<image class="img_l_t" :src="index_l_t_img" mode=""></image>
							<view class="box_l_t">{{i.sell_price}}元/天</view>
							<view class="boxs3_cons">
								<image :src="i.photo" mode=""></image>
								<view class="title_name">{{i.title}}</view>
								<view class="cons_foot">
									<text>已租{{i.sale}}</text>
									<image src="@/static/detail_gwc.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box_pg">
					<view class="pg_head">
						<view class="head_l">
							<text>评论</text>
							<text>（{{productsdata.comments_count}}）</text>
						</view>
						<view class="head_r"
							@click="$utils.navigateTo('comments/view',{ id: goods_id, type: 'goods' })">更多</view>
					</view>
					<view class="pg_box">
						<view class="pg_item" v-for="(item,index) in comments" :key="index">
							<view class="item_t">
								<image :src="item.avatar" mode=""></image>
								<view class="t_right">
									<text>{{item.username}}</text>
									<text>{{item.time}}</text>
								</view>
							</view>
							<view class="item_content">{{item.content}}</view>
						</view>
						<!-- 		<view class="pg_wen">
							<text>问大家(9）</text>
							<text>查看全部></text>
						</view> -->
						<!-- 			<view class="pg_foot">
							<view class="foot_item" v-for="i in 1">
								<view class="item_l">
									<image src="@/static/detail_pl_icon.png" mode=""></image>
									<text>苹果手机能导出吗？照片导出方便吗？</text>
								</view>
								<view class="item_r">1个回答</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="box_liubai" @click="$utils.navigateTo('tuoguan/index')">
					<image :src="detail_middle_img" mode=""></image>
				</view>
				<view class="dp_box">
					<view class="dp_l">
						<view class="l_img">
							<image :src="avater_img" mode=""></image>
						</view>
						<view class="l_left">
							<view class="left_top">{{store.title}}</view>
							<view class="left_down">{{store.address}}</view>
						</view>
					</view>
					<view class="dp_r" @click="$utils.navigateTo('index/NationList',{ id: store.id})">进入店铺</view>
				</view>
				<view class="zl_box" @click="fobottm">
					<image :src="detail_zl_img" mode=""></image>
				</view>
				<view class="detail_title">
					<image class="img_bg" :src="detail_title_img" mode=""></image>
					<view class="box_bg">详情</view>
				</view>
				<view class="detail_imgs">
					<view class="clear" v-html="products.content">
						products.content
					</view>
					<view class="foot_text">
						注：您所租赁的设备为<text>二手器材</text>、图文详情页得展示均为 <text>参考图片</text>。
					</view>
				</view>
				<view class="zl_box" style="margin-bottom: 15px;">
					<image :src="detail_zl11_img" style="border-radius: 14px;
    border: 1px solid #d7ecfe;" mode=""></image>
				</view>
				<view class="detail_zj">
					<view class="zj_head">
						<image src="@/static/index_title_icon.png" mode=""></image>
						<text>租金计算方式</text>
					</view>
					<view class="zj_m">租金计算：24小时为1天，首日不足一天的按1天计算；超过 1天且不超过8小时，按当天价格/8×小时数计算。</view>
					<view class="zj_btn">
						<view class="btn " :class="{'btn_act':addclass == 1}" @click="addclas(1)">自提</view>
						<view class="btn" :class="{'btn_act':addclass == 2}" @click="addclas(2)">闪送</view>
						<view class="btn" :class="{'btn_act':addclass == 3}" @click="addclas(3)">顺丰快递</view>
					</view>
					<view class="zj_time">
						<image src="@/static/detail_time.png" mode=""></image>
						<text v-if="addclass == 1">请在取货时间上门自提，归还仅支持“自己送还”或“同城闪送”</text>
						<text v-if="addclass == 2">您将在“起租时间”收到，归还时请在“归还时间”送出，归还时仅支持“自送还”或“闪送归还”</text>
						<text v-if="addclass == 3">我们将提前发货，预计在您的“起租时间”前一天收到，如因快递原因未及时送达
							，我们可免费为您延期，归还是需在“归还时间”次日顺丰寄出。快递途中不计算租金</text>
					</view>
					<view class="zj_qh" v-if="addclass == 1">
						<view class="qh_text">取货</view>
						<view class="qh_text">归还</view>
					</view>
					<view class="zj_qh" v-if="addclass == 2">
						<view class="qh_text">送达</view>
						<view class="qh_text">归还</view>
					</view>
					<view class="zj_qh" style="justify-content: start;" v-if="addclass == 3">
						<view class="qh_text" style="">发货</view>
						<view class="qh_text" style="margin-left: 5%;">签收</view>
						<view class="qh_text" style="margin-left: 6%;">起租</view>
						<view class="qh_text" style="margin-left: 37%;">寄回</view>
					</view>
					<view class="qh_time">
						<image :src="detail_qh_time_img" mode=""></image>
					</view>
				</view>

				<view class="detail_quest">
					<view class="quest_head">
						<image src="@/static/index_title_icon.png" mode=""></image>
						<text>关于下单</text>
					</view>
					<u-collapse :border="true">
						<u-collapse-item title="关于档期与库存" name="1">
							<text
								class="u-collapse-content">下单成功的即代表商品有档期，亦可浏览产品点击“查看档期”查看是否有货;下单成功后，我们将为您锁定该商品的档期。</text>
						</u-collapse-item>
						<u-collapse-item title="关于免押金" name="1">
							<text class="u-collapse-content">申请免押金后，免押金额度可反复使用。免押金额度不够时，可支付部分押金，订单完结后押金将原路返回。
							
							若设备较多，押金过高时，您可以直接致电{{productsdata.cf_app_phone}}，与我们联系。</text>
						</u-collapse-item>
						<u-collapse-item title="企业微信" name="1">
										<view class="code_box" style="justify-content:  space-between">
													<view class="box_l">
														<view class="u-collapse-content">
														下单问题可扫描右边二维码 联系客服
														</view>
													</view>
													<image :src="productsdata.cf_app_wx_ewm" mode=""></image>
												</view>
						
						</u-collapse-item>
					</u-collapse>
				</view>
				<view class="detail_quest">
					<view class="quest_head">
						<image src="@/static/index_title_icon.png" mode=""></image>
						<text>关于优惠卷</text>
					</view>
					<view class="cont_text">
						<view class="icon"></view>
						<text>优惠卷会在您下单时直接抵扣，优惠卷不可与VIP优惠同 时使用。订单取消后，优惠卷自动退还。</text>
					</view>
				</view>
				<view class="detail_quest">
					<view class="quest_head">
						<image src="@/static/index_title_icon.png" mode=""></image>
						<text>关于归还</text>
					</view>
					<view class="cont_text">
						<view class="icon"></view>
						<text>
							下单后在<text style="color: #3B76FF;">“我的”</text>-<text
								style="color: #3B76FF;">“订单”</text>-<text style="color: #3B76FF;">“订单详情”</text> 查看。
						</text>
					</view>
				</view>
				<view class="detail_quest">
					<view class="quest_head">
						<image src="@/static/index_title_icon.png" mode=""></image>
						<text>取消订单与退款</text>
					</view>
					<u-collapse :border="true">
						<u-collapse-item title="提前归还" name="1">
							<text class="u-collapse-content">“自提和闪送”的订单，提前归还的时间超过1天，即可退换还未使用期间的租金。
								
								“顺丰快递”的订单，我们设置了“最短起租时间”限制，若商品已发货，则最短起租时间内的租金无法退还。超出最短起租时问后，早于租期结束时间一天寄回，即可退未使用期间的租金费用。
								
								退款金额计算方式:
								“已支付的租金”“实际使用时间计算出的租金(快递订单有最短起租天数)“=需退款金额。
								您也可以通过“申请退款-提前归还退差价”，自动计算出可退金额。
								ps:实际使用时间计算出的租金:可通过商品详情页，选
								择相同天数，即自动得出。</text>
						</u-collapse-item>
						<u-collapse-item title="取消订单" name="1">
							<text class="u-collapse-content">若订单在起租时间前，且发货时间前取消，订单可全额退款。商家确认退款后，将退回至您的原支付账户。</text>
						</u-collapse-item>
					</u-collapse>
				</view>
				<view class="detail_quest">
					<view class="quest_head">
						<image src="@/static/index_title_icon.png" mode=""></image>
						<text>损坏/丢失/拒还</text>
					</view>
					<u-collapse :border="true">
						<u-collapse-item title="设备损坏如何处理？" name="1">
							<text class="u-collapse-content">质量问题:由商家承担维修费用，并免除该商品出现质量
								问题时间后的租金。
								人为损坏:由租客赔付损坏费用给商家。如需设备维修，租客需将损坏的设备交由商家维修，并支付一定的预维修金额。维修期间租客无需支付租金，维修结束后商家向租客
								出具”维修明细单”，根据实际维修费用多退少补。</text>
						</u-collapse-item>
						<u-collapse-item title="丢失/拒还会怎样？" name="1">
							<text class="u-collapse-content">租赁设备中若是存在丢失现象，请及时告知商家协商赔偿金额;
								若拒还设备，可能会对您的个人信用造成严重影响，咔么有权通过司法途径追责。</text>
						</u-collapse-item>
					</u-collapse>
				</view>
				<view class="detail_quest">
					<view class="quest_head">
						<image src="@/static/index_title_icon.png" mode=""></image>
						<text>续租与发票</text>
					</view>
					<u-collapse :border="true">
						<u-collapse-item title="关于续租" name="1">
							<text class="u-collapse-content">商家发货后，方可续租。
								关于再续租价格:
								1、早于归还时间前5小时，且库存充足的情况下，系统将按照优惠价格计算租金。
								2、晚于以上时间或库存不足时，系统将按照新订单计算租金。</text>
						</u-collapse-item>
						<u-collapse-item title="关于发票" name="1">
							<text class="u-collapse-content">订单完成后，可进入“我的"一"申请发票”。</text>
						</u-collapse-item>
					</u-collapse>
				</view>
				<view class="detail_quest">
					<view class="quest_head">
						<image src="@/static/index_title_icon.png" mode=""></image>
						<text>企业租</text>
					</view>
					<view class="code_box">
						<view class="box_l">
							<view class="l_text1">线下租或企业租</view>
							<view class="l_text2">
								欢迎致电 <text>{{productsdata.cf_app_phone}}</text>（同微信） 与我们联系
							</view>
						</view>
						<image :src="productsdata.cf_app_wx_ewm" mode=""></image>
					</view>
				</view>
			</view>
			<sku-action :key="componentKey"  v-model="isSkuStatus" :goods="products" :attribute="attribute" :item="item"
				:goods-info.sync="selectedGoodsInfo" :fields="fields"  :zuqi="zuqi"></sku-action>
			<view class="footer">
				<view class="footer_l">
					<view class="l_item" @click="$utils.navigateTo('index/NationList',{ id: store.id})">
						<image src="@/static/detail_foot_icon1.png" mode=""></image>
						<view class="texts">店铺</view>
					</view>
					<view class="l_item" @click="$utils.navigateTo('tell/index')">
						<image src="@/static/detail_foot_icon2.png" mode=""></image>
						<view class="texts">客服</view>
					</view>
					<view class="l_item" @click="$utils.navigateTo('cart/index')">
						<image src="@/static/detail_foot_icon3.png" mode=""></image>
						<view class="texts">租物车</view>
					</view>
				</view>

				<view class="footer_r">
					<view class="r_l" @click="onBuyClicked">立即租</view>
					<view class="r_r" @click="onAddCartClicked">加入购物车</view>
				</view>
				<!-- 			<goods-action>
					<goods-action-icon icon="home" @click="$utils.switchTab('index/index')" text="首页"></goods-action-icon>
					<goods-action-icon icon="cart" @click="$utils.switchTab('cart/index')" text="购物车" :count="cartCount"></goods-action-icon>
					<goods-action-icon icon="collect" @click="favorite" text="收藏" :active="collect"></goods-action-icon>
					<goods-action-button type="cart" @click="onAddCartClicked" text="加入购物车"></goods-action-button>
					<goods-action-button type="buy" @click="onBuyClicked" text="立即购买"></goods-action-button>
				</goods-action> -->

				<share v-model="isShareStatus" :title="products.title" :url="share_url" :text="products.title"
					:image="products.photo"></share>
			</view>
		</view>
	</view>
</template>


<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import SkuAction from '../../components/sku-action/sku-action';
	import GoodsAction from "../../components/goods-action/goods-action";
	import GoodsActionButton from "../../components/goods-action/goods-action-button";
	import GoodsActionIcon from "../../components/goods-action/goods-action-icon"
	import share from "../../components/share/index.vue";
	import loading from '../../components/tool/loading'
	import parse from "../../uni_modules/uview-ui/libs/config/props/parse";
	import config from "@/config";
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody,
			MescrollUni,
			SkuAction,
			GoodsAction,
			GoodsActionButton,
			GoodsActionIcon,
			share,
			loading
		},
		data() {
			return {
				value: 0,
				zuqi: '',
				  componentKey: 0,
				addclass: 1,
				list1: [
					"https://img-nos.yiyouliao.com/155c3071db64cff7744bfb95f537edba.jpeg?yiyouliao_channel=vivo_image",
					"https://inews.gtimg.com/om_bt/Ou5HAWljaBhb3UV6j1Y7xCU1r_QMx28llYCozV4XmOOi8AA/1000"
				],
				isLoading: true,
				upOption: {
					use: false,
					auto: false
				},
				fields: ["id"],
				isSkuStatus: false,
				isShareStatus: false,
				images: [],
				collect: false,
				cartCount: 0,
				current: 0,
				selectedGoodsInfo: {},
				products: {},
				productsdata: {},
				store: {},
				attribute: [],
				goods_tj: [],
				comments: [],
				item: {},
				goods_id: 0,
				share_url: "",
				detail_zl_img:config.uni_app_web_url + 'static/h5/detail_zl.png',
				detail_zl11_img:config.uni_app_web_url + 'static/h5/11.png',
				detail_bg_img:config.uni_app_web_url + 'static/h5/detail_bg.png',
				avater_img:config.uni_app_web_url + 'static/h5/avater.png',
				detail_middle_img:config.uni_app_web_url + 'static/h5/detail_middle.png',
				detail_qh_time_img:config.uni_app_web_url + 'static/h5/detail_qh_time.png',
				detail_title_img:config.uni_app_web_url + 'static/h5/detail_title.png',
				detail_zy_img:config.uni_app_web_url + 'static/h5/detail_zy.png',
				index_l_t_img:config.uni_app_web_url + 'static/h5/index_l_t.png',
				tg_icon_7_img:config.uni_app_web_url + 'static/h5/tg_icon_7.png',
				statusH:this.$storage.get("statusH")
			};
		},
		onLoad(options) {
			this.goods_id = options.id;
		},
		onShow() {
			this.updateData()
			let users = this.$storage.getJson("users");
			this.cartCount = users != null ? users.shop_count : 0;
			this.loadGoodsData();
			const date = JSON.parse(uni.getStorageSync('selectedDateTime'))
			console.log(date, 'datedatedate')
			if (date) {
				this.zuqi = date
			}
		},
		onNavigationBarButtonTap(e) {
			this.isShareStatus = !this.isShareStatus;
		},
		methods: {
			 updateData() {
			      // 更新数据后，改变 key 值
			      this.componentKey += 1;
			    },
			formatDate(input) {
				// 创建一个新的 Date 对象
				const date = new Date(input);

				// 获取年、月、日、小时
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需要加 1
				const day = String(date.getDate()).padStart(2, "0");
				const hours = String(date.getHours()).padStart(2, "0");
				const minutes = String(date.getMinutes()).padStart(2, "0");

				// 拼接成目标格式
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			onSwiperChange(event) {
				this.current = event.detail.current;
			},
			downCallback() {
				setTimeout(() => {
					this.loadGoodsData();
					this.mescroll.endSuccess(10, false);
				}, 1200);
			},
			triggerDownScroll() {
				this.mescroll.triggerDownScroll();
			},
			loadGoodsData() {
				this.$http.getGoodsDetail({
					id: this.goods_id
				}).then((result) => {
					this.collect = result.data.collect ? true : false;
					this.products = result.data.goods;
					this.goods_tj = result.data.goods_tj;
					this.store = result.data.store;
					this.attribute = result.data.attr;
					this.comments = result.data.comments;
					this.item = result.data.item;
					this.images = result.data.photo;
					this.productsdata = result.data
					this.share_url = this.$config.uni_app_web_url + "goods/view/" + this.goods_id;
					this.isLoading = false;
				}).catch(err => {

				});
			},
			favorite() {
				this.$store.dispatch("usersStatus").then(() => {
					this.$http.goodsDetailFavorite({
						id: this.goods_id
					}).then((result) => {
						if (result.status) {
							this.collect = result.data == 1 ? true : false;
						} else {
							this.$utils.msg(result.info);
						}
					});
				}).catch(() => {
					this.$storage.set("VUE_REFERER", "/goods/view/id/" + this.goods_id);
					this.$utils.navigateTo("public/login");
				});
			},
			onChange(index) {
				this.current = index;
			},
			onClicked() {
				if (this.isSkuStatus == false) {
					this.isSkuStatus = true;
					return;
				}
			},
			onBuyClicked() {
				if (this.isSkuStatus == false) {
					this.isSkuStatus = true;
					return;
				}

				if (!this.selectedGoodsInfo.isSubmit) {
					this.$utils.msg("请选择规格！");
					return false;
				}
				if (!this.zuqi) {
					this.$utils.msg("请选择租期！");
					return false;
				}

				this.$store.dispatch("usersStatus").then(() => {
					this.$utils.navigateTo("cart/confirm", {
						id: this.selectedGoodsInfo.id,
						sku_id: this.selectedGoodsInfo.selectedSku.id,
						num: this.selectedGoodsInfo.num,
						type: "buy",
						start_time: this.formatDate(this.zuqi.start.fullDateTime),
						end_time: this.formatDate(this.zuqi.end.fullDateTime),
						pickup_type: this.zuqi.pickupType,
						
					});
				}).catch(() => {
					this.$storage.set("VUE_REFERER", "/goods/view/id/" + this.goods_id);
					this.$utils.navigateTo("public/login");
				});
			},
			addclas(i) {
				this.addclass = i
			},
			fobottm() {
				uni.pageScrollTo({
					scrollTop: 1700, // 设置滚动到距离页面顶部的距离（单位为 px）
					duration: 300, // 滚动动画的时长（单位为 ms）
				});
			},
			onAddCartClicked() {
				if (this.isSkuStatus == false) {
					this.isSkuStatus = true;
					return;
				}

				if (!this.selectedGoodsInfo.isSubmit) {
					this.$utils.msg("请选择规格！");
					return false;
				}

				this.$store.dispatch("usersStatus").then(() => {
					this.$http.goodsDetailAddCart({
						id: this.selectedGoodsInfo.id,
						sku_id: this.selectedGoodsInfo.selectedSku.id,
						start_time: this.formatDate(this.zuqi.start.fullDateTime),
						end_time: this.formatDate(this.zuqi.end.fullDateTime),
						pickup_type: this.zuqi.pickupType,
						num: this.selectedGoodsInfo.num,
					}).then((result) => {
						this.isShow = false;
						if (result.status) {
							this.cartCount = result.data.count;
							this.$store.commit("UPDATECART", result.data.count);
							this.$utils.msg(result.info);
							if (result.data.count > 0) {
								uni.setTabBarBadge({
									index: 2,
									text: result.data.count.toString()
								});
							} else {
								uni.removeTabBarBadge({
									index: 2
								})
							}
						} else {
							this.$utils.msg(result.info);
						}
					}).catch((error) => {
						this.$utils.msg("网络出错，请检查网络是否连接");
					});
				}).catch(() => {
					this.$storage.set("VUE_REFERER", "/goods/view/id/" + this.goods_id);
					this.$utils.navigateTo("public/login");
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		background: #F7FEFF;
	}

	.container {
		padding-bottom: 200rpx;

		.top {
			height: 503rpx;
			position: relative;

			.nav {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: fixed;
				width: calc(100% - 60rpx);
				padding: 30rpx;
				z-index: 55;
				left: 0;
				top: 0;

				image {
					width: 42rpx;
					height: 47rpx;
				}

				.title {
					flex: 1;
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.nav_right {
					display: flex;
					align-items: center;

					image:nth-child(2) {
						margin-left: 24rpx;
					}
				}
			}
		}

		.box {
			padding: 30rpx 32rpx;

			.box1 {
				height: 450rpx;
				background: #EEEEEE;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				border: 1rpx solid #FFD89E;

				.top {
					height: 177rpx;
					position: relative;

					.top_bg {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
					}

					.box_text {
						position: absolute;
						z-index: 2;
					}

					.box_text1 {
						padding: 2rpx 11rpx;
						background: #3B76FF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						left: 20rpx;
						top: 26rpx;
					}

					.box_text2 {
						font-weight: 600;
						font-size: 20rpx;
						color: #3B76FF;

						text {
							font-size: 50rpx;
						}

						left: 20rpx;
						top: 58rpx;
					}

					.box_text3 {
						font-weight: 600;
						font-size: 24rpx;
						color: #3B76FF;
						right: 25rpx;
						top: 25rpx;
					}

					.box_text4 {
						padding: 2rpx 15rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 1rpx solid #3B76FF;
						font-weight: 400;
						font-size: 20rpx;
						color: #3B76FF;
						right: 25rpx;
						top: 76rpx;
					}

					.middle_box {
						position: absolute;
						width: calc(100% - 40rpx);
						top: 132rpx;
						padding: 20rpx;
						background: #FFFFFF;
						min-height: 115px;
						z-index: 9;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);

						.box_jg {
							padding: 19rpx 0 25rpx 0;
							background: #FAFAFA;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.jg_l {
								display: flex;
								align-items: center;

								.l_item {
									padding: 0 30rpx;
									border-right: 1rpx solid #D8D8D8;
									text-align: center;

									.item_d {
										font-weight: 400;
										font-size: 18rpx;
										color: #666666;
									}

									.item_m {
										margin-top: 8rpx;
										font-weight: 400;
										font-size: 18rpx;
										color: #FF0000;
									}
								}
							}

							.jg_r {
								flex: 1;
								height: 102rpx;
								background: #FAFAFA;
								// box-shadow: -5rpx 3rpx 4rpx 0rpx rgba(0,0,0,0.1);
								border-radius: 0rpx 24rpx 24rpx 0rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								.r_text {
									font-weight: 400;
									font-size: 24rpx;
									color: #666666;
									padding-right: 7rpx;
								}

								image {
									width: 30rpx;
									height: 30rpx;
								}
							}
						}

						.box_title {

							// display: flex;
							image {
								float: left;
								width: 98rpx;
								height: 36rpx;
								margin-right: 10rpx;
							}

							.zy_title {
								font-weight: 400;
								font-size: 32rpx;
								color: #3D3D3D;
							}
						}
					}

					.box_foot {
						position: absolute;
						width: calc(100% - 48rpx);
						padding: 0 24rpx;
						top: 390rpx;
						z-index: 99;
						padding: 20rpx;
						font-weight: 400;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.foot_item:nth-child(1) {
							color: #666666;
						}

						.foot_item {
							color: #FF0000;
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 24rpx;
							}

							text {
								padding-left: 10rpx;
							}
						}
					}
				}
			}

			.box2 {
				margin-top: 30rpx;
				padding: 24rpx 32rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.tit_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.img_yes {
						width: 30rpx;
						height: 30rpx;
					}

					.item_l {
						flex: 1;
						display: flex;
						align-items: center;

						.l_t {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.l_r4 {
							display: flex;
							align-items: center;
							margin-left: 36rpx;

							text {
								font-weight: 400;
								font-size: 24rpx;
								color: #3B76FF;
							}

							.r4_i {
								margin-left: 42rpx;
								display: flex;
								align-items: center;
								padding: 3rpx 10rpx;
								background: #F4F4F4;
								border-radius: 8rpx 8rpx 8rpx 8rpx;

								image {
									width: 24rpx;
									height: 24rpx;
								}

								text {
									font-weight: 400;
									font-size: 20rpx;
									color: #999999;
									padding-left: 10rpx;
								}
							}
						}

						.l_r3 {
							margin-left: 36rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;

							text {
								padding-left: 10rpx;
								color: #3B76FF;
							}
						}

						.l_r {
							margin-left: 36rpx;
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;

							text {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.l_r2 {
							margin-left: 36rpx;
							margin-top: -8rpx;
							flex: 1;

							text {
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
							}

							.r2_d {
								margin-top: 24rpx;
								display: flex;
								align-items: center;

								image {
									width: 66rpx;
									height: 66rpx;
									border-radius: 8rpx 8rpx 8rpx 8rpx;
								}

								.d_tc {
									margin-left: 20rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #666666;
									padding: 8rpx 16rpx;
									background: #F4F4F4;
									border-radius: 12rpx 12rpx 12rpx 12rpx;
								}
							}
						}

						.l_cont {
							margin-left: 36rpx;
							position: relative;
							width: 120rpx;
							height: 42rpx;

							.c_bg {
								position: absolute;
								width: 100%;
								height: 100%;
								left: 0;
								top: 0;
								z-index: 1;
							}

							.c_box {
								position: absolute;
								width: 100%;
								height: 100%;
								left: 0;
								top: 0;
								z-index: 3;
								font-weight: 400;
								font-size: 24rpx;
								color: #FFFFFF;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}

			.boxs_3 {
				margin-top: 30rpx;
				background: #FFFFFF;
				padding: 18rpx 30rpx 30rpx 30rpx;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.boxs3_title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.boxs3_left {
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
						}

						.left_item {
							font-size: 32rpx;
							color: #3D3D3D;
							margin-left: 15rpx;
						}

						.left_act {
							font-size: 32rpx !important;
							color: #3D3D3D !important;
						}
					}

					.boxs3_right {
						width: 89rpx;
						height: 34rpx;
						background: linear-gradient(116deg, #D1F0F1 0%, #F2EBFF 100%);
						border-radius: 136rpx 136rpx 136rpx 136rpx;
						line-height: 34rpx;
						text-align: center;
						font-weight: normal;
						font-size: 24rpx;
						color: #3B76FF;
					}
				}

				.boxs3_box {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					overflow: auto;

					.boxs3_item {
						margin-right: 26rpx;
						padding: 15rpx;
						width: calc(220rpx - 30rpx);
						background: #FAFEFF;
						border-radius: 12rpx !important;
						border: 1rpx solid;
						position: relative;
						border-image: linear-gradient(116deg, rgba(241.00000083446503, 230.33333480358124, 209.00000274181366, 1), rgba(164.73450601100922, 255, 169.2477822303772, 1)) 1 1;

						.img_l_t {
							position: absolute;
							left: 0;
							top: 0;
							z-index: 2;
							width: 160rpx;
							height: 37rpx;
						}

						.box_l_t {
							position: absolute;
							left: 0;
							top: 0;
							z-index: 3;
							width: 160rpx;
							height: 37rpx;
							font-weight: normal;
							font-size: 22rpx;
							color: #FFFFFF;
							text-align: center;
						}

						.boxs3_cons {
							padding-top: 45rpx;

							image {
								width: 187rpx;
								height: 138rpx;
							}

							.title_name {
								font-weight: normal;
								font-size: 22rpx;
								color: #3D3D3D;
								overflow: hidden;
								text-overflow: ellipsis;
								text-wrap: wrap;
								white-space: normal;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}

							.cons_foot {
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-top: 10rpx;

								text {
									font-weight: 400;
									font-size: 22rpx;
									color: #999999;
								}

								image {
									width: 30rpx;
									height: 30rpx;
								}
							}
						}
					}
				}
			}



			.box_pg {
				margin-top: 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 26rpx 33rpx;

				.pg_head {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.head_l {
						display: flex;

						text:nth-child(1) {
							font-weight: 400;
							font-size: 32rpx;
							color: #666666;
						}

						text:nth-child(2) {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							padding-left: 15rpx;
						}
					}

					.head_r {
						width: 89rpx;
						height: 34rpx;
						background: linear-gradient(116deg, #D1F0F1 0%, #F2EBFF 100%);
						border-radius: 136rpx 136rpx 136rpx 136rpx;
						line-height: 34rpx;
						text-align: center;
						font-weight: normal;
						font-size: 24rpx;
						color: #3B76FF;
					}
				}

				.pg_box {
					.pg_item {
						margin-top: 27rpx;
						padding-bottom: 45rpx;
						border-bottom: 1.5rpx solid #D8D8D8;

						.item_t {
							display: flex;
							align-items: center;
							justify-content: space-between;

							image {
								width: 64rpx;
								height: 64rpx;
							}

							.t_right {
								flex: 1;
								padding-left: 20rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}
						}

						.item_content {
							margin-top: 15rpx;
							padding-left: 60rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
						}
					}

					.pg_wen {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						text:nth-child(1) {
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}

						text:nth-child(2) {
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
						}
					}

					.pg_foot {
						.foot_item {
							margin-top: 26rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.item_l {
								display: flex;
								align-items: center;

								image {
									width: 40rpx;
									height: 40rpx;
								}

								text {
									padding-left: 24rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #333333;
								}
							}

							.item_r {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}
			}

			.box_liubai {
				margin-top: 30rpx;
				height: 98rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.dp_box {
				padding: 32rpx;
				margin-top: 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.dp_l {
					flex: 1;
					display: flex;
					align-items: center;

					.l_img {
						width: 90rpx !important;
						height: 90rpx !important;

						image {
							width: 90rpx !important;
							height: 90rpx !important;
						}
					}

					.l_left {
						margin-left: 20rpx;
						font-weight: 400;
						font-size: 24rpx;

						.left_top {
							color: #333333;
						}

						.left_down {
							margin-top: 15rpx;
							color: #999999;
						}
					}
				}

				.dp_r {
					margin-left: 10rpx;
					padding: 5rpx 10rpx;
					border-radius: 109rpx 109rpx 109rpx 109rpx;
					border: 1rpx solid #3B76FF;
					font-weight: 400;
					font-size: 20rpx;
					color: #3B76FF;
					text-align: center;
				}
			}

			.zl_box {
				margin-top: 30rpx;
				height: 249rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.detail_title {
				margin-top: 30rpx;
				margin-left: auto;
				margin-right: auto;
				position: relative;
				width: 123rpx;
				height: 49rpx;

				.img_bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}

				.box_bg {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.detail_imgs {
				margin-top: 30rpx;
				padding: 29rpx 32rpx;
				background: #FFFFFF;

				image {
					height: 100%;
					height: 708rpx;
				}

				.foot_text {
					margin-top: 27rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
					padding: 0 36rpx;

					text {
						color: #FF0000;
					}
				}
			}

			.detail_zj {
				padding: 16rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.zj_head {
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}

					text {
						padding-left: 10rpx;
						font-weight: normal;
						font-size: 32rpx;
						color: #3D3D3D;
					}
				}

				.zj_m {
					margin-top: 16rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

				.zj_btn {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						width: 140rpx;
						height: 50rpx;
						border-radius: 109rpx 109rpx 109rpx 109rpx;
						border: 1rpx solid #3B76FF;
						font-weight: 400;
						font-size: 24rpx;
						color: #3B76FF;
						text-align: center;
						line-height: 50rpx;
					}

					.btn_act {
						background: #3B76FF !important;
						color: #FFFFFF !important;
					}
				}

				.zj_time {
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}

					text {
						padding-left: 12rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #3B76FF;
					}
				}

				.zj_qh {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.qh_text {
						font-weight: 400;
						font-size: 32rpx;
						color: #FF7A45;
					}

					.qh_text:nth-child(1) {
						margin-right: 70rpx;
					}

					.qh_text:nth-child(2) {
						margin-left: 70rpx;
					}
				}

				.qh_time {
					margin-top: 20rpx;
					height: 91rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}
			}

			.detail_quest {
				padding: 16rpx;
				margin-top: 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.quest_head {
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}

					text {
						padding-left: 10rpx;
						font-weight: normal;
						font-size: 32rpx;
						color: #3D3D3D;
					}
				}

				.code_box {
					display: flex;
					align-items: center;

					.box_l {
						.l_text1 {
							margin-top: 20rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #3D3D3D;
						}

						.l_text2 {
							margin-top: 20rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #3D3D3D;

							text {
								color: #3B76FF;
							}
						}
					}

					image {
						width: 168rpx;
						height: 168rpx;
					}
				}
				
				.u-collapse{
					image {
						width: 168rpx;
						height: 168rpx;
					}
					.u-collapse-content{font-size: 24rpx;}	
				}
				
				.cont_text {
					margin-top: 20rpx;
					display: flex;

					.icon {
						margin-top: 12rpx;
						width: 12rpx;
						height: 12rpx;
						background: linear-gradient(180deg, #55B6EA 0%, #84E7E4 100%), #D8D8D8;
						border-radius: 100%;
					}

					text {
						flex: 1;
						margin-left: 15rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			z-index: 100000;
			left: 0;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(141, 191, 252, 0.5);
			width: calc(100% - 84rpx);
			padding: 34rpx 42rpx 34rpx 42rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.footer_l {
				display: flex;
				align-items: center;
				text-align: center;

				.l_item:nth-child(2) {
					margin: 0 38rpx;
				}

				.l_item {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					.texts {
						margin-top: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
			}

			.footer_r {
				display: flex;
				align-items: center;

				.r_l {
					width: 180rpx;
					height: 80rpx;
					background: linear-gradient(111deg, #FDF8F0 0%, #F7DAB2 100%);
					border-radius: 194rpx 0rpx 0rpx 194rpx;
					border: 1rpx solid #932C00;
					font-weight: 400;
					font-size: 32rpx;
					color: #932C00;
					line-height: 80rpx;
					text-align: center;
				}

				.r_r {
					width: 180rpx;
					height: 80rpx;
					background: linear-gradient(121deg, #FFB361 0%, #E75A02 99%);
					border-radius: 0 194rpx 194rpx 0;
					border: 1rpx solid #932C00;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}






	}
</style>